<template>
  <div class="fx-collapse-item">
    <div class="fx-collapse-item-title" :class="{padding:!$slots.title}" @click="titleClick">
      <div class="title">
        <slot name="title">{{ title }}</slot>
      </div>
      <span v-if="!hideArrow" class="fx-select-dropdown" :class="{active:isSelected}"></span>
    </div>
    <fx-transition-unfold>
      <div class="fx-collapse-item-content" v-if="isSelected">
        <div class="fx-collapse-item-content-inner">
          <slot></slot>
        </div>
      </div>
    </fx-transition-unfold>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, PropType, Ref } from 'vue'
import { Emitter } from 'mitt'
import { CollapseSelected } from '@/base/collapse/collapse.vue'

interface CollapseItemProps {
  title: string;
  name: string;
}

export default defineComponent({
  name: 'fxCollapseItem',
  props: {
    // 名称
    title: {
      type: String as PropType<string>,
      default: ''
    },
    // 当前自己id索引
    name: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup (props: CollapseItemProps) {
    // 父级emit
    const collapseMittEmit = inject<Emitter['emit'] | undefined>('collapseMittEmit', undefined)
    // 当前选中
    const collapseSelected = inject<Ref<CollapseSelected> | undefined>('collapseSelected', undefined)
    // 隐藏箭头
    const hideArrow = inject<Ref<boolean> | true>('collapseHideArrow', true)
    // 判断是否开启或关闭
    const isSelected = computed(() => {
      if (!collapseSelected?.value) return false
      if (typeof collapseSelected.value === 'string') {
        return collapseSelected.value === props.name
      } else if (collapseSelected.value instanceof Array) {
        return collapseSelected.value.includes(props.name)
      } else {
        return false
      }
    })
    // 点击开启/关闭事件
    const titleClick = (): void => {
      collapseMittEmit && collapseMittEmit('collapseItemChange', props.name)
    }

    return {
      hideArrow,
      isSelected,
      titleClick
    }
  }
})
</script>
